import React, {Component} from "react";

const GlobalContext = React.createContext(null);


class ControlledComponents extends Component {
constructor() {
    super();
    this.state = {
        call: '123456'
    }
}

    render() {
        return (
            <div>
                123456
               <GlobalContext.Provider value={{
                   call:this.state.call,
                   changeCall:(value)=>{
                       this.setState({
                           call:value
                       })
                   }
               }}>
                   <Child12></Child12>
                   <Child13></Child13>
               </GlobalContext.Provider>
            </div>
        );
    }
}
class Child12 extends Component {
    state = {}

    render() {
        return (
            <div>
                <GlobalContext.Consumer>
                    {
                        (value) => {
                            console.log(value)
                            return (
                                <div>
                                    <button style={{width:"100px",height:"50px"}} onClick={() => {
                                         value.changeCall("15617717777")
                                    }}>click
                                    </button>
                                    <button onClick={this.print}>打印</button>
                                </div>
                            )
                        }
                    }
                </GlobalContext.Consumer>
            </div>
        )
    }
    print(){
        window.print();
    }
}

class Child13 extends Component {
    state = {}

    render() {
        return (
            <div>
                <GlobalContext.Consumer>
                    {
                        value => <div>细节--{value.call}</div>
                    }
                </GlobalContext.Consumer>
            </div>
        );
    }
}

export default ControlledComponents
